<!DOCTYPE html>
<html><head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Crafty - 快速开始 - 创建第一个游戏</title>
	<link rel="shortcut icon" href="../favicon.ico">
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css">
</head>
<body>
	<div id="header-background"> </div>
	<div id="page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png"> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			
<div id="quickstart">
	<div id="doc-nav">
		<ul id="doc-level-one">
			<li>
				
			</li>
			
		</ul>
	</div>
	<div id="doc-content" class="markdown">
		<h2> 入门 - 创建你的第一个游戏 </h2>
<p>这是一个帮助你使用Crafty的快速入门指南。</p>
<p>更加深入的介绍你可以看看 <a href="http://buildnewgames.com/introduction-to-crafty/">Darren Torpey</a> 的指南.  (从 0.6.3 开始, 除了 Darren 在最后提到的变化, 你需要改变 <a href="../api/Crafty-loader.html"><code>Crafty.load</code></a> 的调用方式。)</p>
<h2 id="setup">开始</h2>
<p>首先让我们来编写 HTML 文件。我们想让你快速上手, 所以在文件中直接引用 Crafty 最新版本。(当然你也可以从本地 <a href="../#install">安装</a>)</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"game"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//cdn.bootcss.com/crafty/0.8.0/crafty-min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
      Crafty.init(<span class="hljs-number">500</span>,<span class="hljs-number">350</span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'game'</span>));
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre>
<p>一个 Crafty.js 游戏使用实体创建 —— 玩家角色，敌人，障碍物都使用这种方式表示。</p>
<p>让我们来创建一个带颜色的方块:</p>
<pre><code class="language-javascript">Crafty.e(<span class="hljs-string">'2D, DOM, Color'</span>).attr({<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>}).color(<span class="hljs-string">'#F00'</span>);</code></pre>
<p>代码解释如下:</p>
<ul>
<li>我们使用一个组件列表调用 <a href="../api/Crafty-e.html"><code>Crafty.e</code></a> 来创建实体。组件提供功能的基本构建单元。 在这个例子中, 我们添加了 <a href="../api/2D.html">2D</a>, <a href="../api/DOM.html">DOM</a>, 和 <a href="../api/Color.html">Color</a>。你稍后还会学到更多组件!</li>
<li>我们在新创建的实体上调用了两个方法: <code>attr()</code> 和 <code>color()</code>。<code>attr</code> 方法在 <a href="../api/Crafty%20Core.html">所有实体</a> 上都可以调用, 但是 <code>color()</code> 方法是由 "Color" 组件提供的。大部分方法调用都会返回实体本身, 从而允许你进行链式调用。</li>
</ul>
<p>完整的代码如下:</p>
<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"game"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//cdn.bootcss.com/crafty/0.8.0/crafty-min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
      Crafty.init(<span class="hljs-number">500</span>,<span class="hljs-number">350</span>, <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'game'</span>));
      Crafty.e(<span class="hljs-string">'2D, DOM, Color'</span>).attr({<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>}).color(<span class="hljs-string">'#F00'</span>);
    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre>
<p>执行结果:</p>
<iframe src="http://jsfiddle.net/kevinsimper/pShLx/embedded/result,js,html/" allowfullscreen="allowfullscreen" height="300" frameborder="0" width="100%"></iframe>

<p>现在我们的屏幕上出现了一些东西，让我们通过键盘来移动它吧。</p>
<p>这可以使用 <a href="../api/Fourway.html">"Fourway"</a> 组件来完成。这个组件非常适合自上而下的游戏，可以让我们朝四个方向移动（顾名思义）。</p>
<pre><code class="language-javascript">Crafty.e(<span class="hljs-string">'2D, DOM, Color, Fourway'</span>)
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>})
  .color(<span class="hljs-string">'#F00'</span>)
  .fourway(<span class="hljs-number">200</span>);</code></pre>
<p>注意我们如何把这个组件的名称添加到 Color 的后边。这增加了新的方法，如 ".fourway" 功能。传递给函数的数字决定了速度，所以如果数字越高，移动速度越快。</p>
<iframe src="//jsfiddle.net/mucaho/w5m40ofL/embedded/result,js,html/" allowfullscreen="allowfullscreen" height="300" frameborder="0" width="100%"></iframe>

<p>让我们试着让它看起来像一个平台游戏，实体受到重力的影响。这可以用 "Gravity" 组件来完成。 </p>
<p>但是，如果我们添加了 Gravity 组件，实体就会一直下落，因为没有东西阻止它。所以让我们添加一个长薄的盒子来让它停在上边：</p>
<pre><code class="language-javascript">Crafty.e(<span class="hljs-string">'Floor, 2D, Canvas, Color'</span>)
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">10</span>})
  .color(<span class="hljs-string">'green'</span>);</code></pre>
<p>注意我们如何添加一个新的组件 "Floor" 到这个实体。你在组件的API文档中找不到这个组件，这个组件不会添加新的方法，它只是一个我们用来标记这个实体的名字。</p>
<p>Gravity 组件只应加到应该掉落的物体上，所以我们不需要把它添加到我们的新实体中。</p>
<p>现在我们添加 Gravity 组件到我们之前的红色盒子：</p>
<pre><code class="language-js">Crafty.e(<span class="hljs-string">'2D, Canvas, Color, Twoway, Gravity'</span>)
  .attr({<span class="hljs-attr">x</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">50</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">50</span>})
  .color(<span class="hljs-string">'#F00'</span>)
  .twoway(<span class="hljs-number">200</span>)
  .gravity(<span class="hljs-string">'Floor'</span>);</code></pre>
<p>你需要注意 ".gravity()" 方法调用的时候有一个参数 "Floor"。这意味着所有拥有 Floor 组件的实体可以阻止物体进一步下落。</p>
<p>此外，我们使用 <a href="../api/Twoway.html">"Twoway"</a> 组件替换 Fourway 组件。这个组件适合侧面滚动平台，使我们能够在两个方向上移动（顾名思义）。它还允许我们与 Gravity 组件相结合。注意我们使用 "twoway" 函数替换了 "fourway"函数，它同样可以用来控制速度。</p>
<iframe src="//jsfiddle.net/mucaho/v8okhwob/embedded/result,js" allowfullscreen="allowfullscreen" height="300" frameborder="0" width="100%"></iframe>

<p>嗯，这不是一个好的游戏，但是一个好的开始！要了解更多关于如何使用 Crafty 的知识，你可以探索我们对常见主题的 <a href="../documentation">概述</a> ，以及详细的 <a href="../api/">api</a> 文档。</p>
	</div>
</div>

			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png">
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png">
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png">
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			© Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>


</body></html>